<template>
  <div class="pad_10">
    <el-form ref="queryRef" :inline="true" label-width="68px">
        <el-form-item>
          <el-button @click="Cancel">取消</el-button>
          <el-button @click="handleQuery">保存</el-button>
          <el-button :disabled="datas.status == 3" @click="addsystemmessageFun">发布信息</el-button>
          <el-button :disabled="datas.status != 3" @click="addsystemmessageFun(1)">查看信息</el-button>
        </el-form-item>
    </el-form>
    <el-divider />
    <SetUserSelect
      ref="setUserSelectmax"
      class="queryForm"
      :labelwidth="130"
      :isShowUserBtn="false"
      :buttonIsShow="false"
      :formData="bill"
      :queryParams="datas"
      @selChangeFun="changeFun"
    ></SetUserSelect>
    <el-form :model="datas" label-width="100px">
        <el-form-item label="">
          <div class="img_flex_c">
            <image-upload :isShowTip="false" showTipText="" :limit="1" v-model="datas.url"></image-upload>
          </div>
        </el-form-item>
    </el-form>
    <el-dialog v-model="dialogFormVisible" title="发布消息">
        <SetUserSelect
          :key="keys"
          ref="setUserSelect"
          :formData="addorderSelect"
          v-model:queryParams="addpaginationParams"
          :isShowUserBtn="false"
          :buttonIsShow="false"
        ></SetUserSelect>
        <template #footer>
          <span class="dialog-footer">
            <el-button v-if="datas.status != 3" @click="dialogFormVisible = false">取消</el-button>
            <el-button v-if="datas.status == 3" type="primary" @click="dialogFormVisible = false"
              >已发布</el-button
            >
            <el-button v-else type="primary" @click="dialogFormVisibleFun"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { useRoute } from "vue-router";
import data from './data'
import { addarticle, eitHarticle, articleId, publish  } from "@/api/trainingManagement";
import { messageList as getList, addsystemmessage } from "@/api/basicManagement/information";
const { bill, datas } = data
datas.value = {
  status: '1',
}
const { proxy } = getCurrentInstance();
const disIstrue = ref(true)
const route: any = useRoute();
const idNew = ref()
let proxys: any = proxy;
  const handleQuery = function():void {
    proxys.$refs.setUserSelectmax.submitForm().then((valid) => {
    (!route.query.id ? addarticle : eitHarticle)(valid).then((res) => {
      proxys.$modal.msgSuccess(`${route.query.id ? "修改" : "新增"}成功`);
      // Cancel();
      idNew.value = res.data.id
      
    });
  });
  };
  const changeFun = function(e:any):void {
    // console.log(e)
  }

  const Cancel = () => {
    datas.value = {};
    const obj = { path: "/trainingManagement/trainingList" };
    proxys.$tab.closeOpenPage(obj);
  };
  route.query.id &&
  articleId(route.query.id).then((res) => {
    res.data.status = "" + res.data.status;
    res.data.type = "" + res.data.type;
    idNew.value = res.data.id
    datas.value = res.data;
    
    if (res.data.status == 3) {
      disIstrue.value = false
    } else {
      disIstrue.value = true
    }
    // proxys.$refs.editors.setdata(datas.value.content)
  });
  // !route.query.id && (datas.value = {});

  const keys = ref(0)
  const dialogFormVisible = ref(false)
  const addorderSelect = ref([
  {
    label: '消息标题',
    model: 'title',
    message: '请输入消息标题',
    required: true,
    placeholder: '请输入',
    type: 'input',
    span: 24
  },
  // {
  //   label: '所属系统',
  //   model: 'toSystem',
  //   placeholder: '请选择',
  //   type: 'select',
  //   required: true,
  //   message: '请选择所属系统',
  //   selectData: [
  //     {
  //       label: '所有',
  //       value: '0'
  //     },
  //     {
  //       label: '管理后台',
  //       value: '1'
  //     },
  //     {
  //       label: '小程序',
  //       value: '2'
  //     }
  //   ],
  //   span: 24
  // },
  {
    label: '内容',
    model: 'content',
    message: '请输入内容',
    required: true,
    placeholder: '请输入',
    type: 'textarea',
    span: 24
  },
  {
    label: '收件人',
    model: 'userIdList',
    placeholder: '请选择',
    type: 'selectMultiple',
    required: true,
    url: '/system/user/list',
    message: '请选择收件人',
    selectData: [],
    labels: 'userName',
    value: 'userId',
    span: 24
  },
])
const addsystemmessageFun = (type) => {
  if(!idNew.value){
    proxys.$modal.msgWarning('请先保存')
    return
  }
  dialogFormVisible.value = true
  if (type == 1) {
    getList({
      businessId: idNew.value,
      businessType: 1
    }).then((res:any) => {
      let userIdList = []
      res.rows?.forEach((val) => {
        userIdList.push(val.userId)
      })
      addpaginationParams.value = {
        userIdList,
        toSystem: '0',
        title: res.rows?.[0]?.title??'',
        businessId: idNew.value,
        businessType: 1, //培训
        content: res.rows?.[0]?.content??'',
      }
    })
    return
  }
  addpaginationParams.value = {
    userIdList: [],
    toSystem: '0',
    title: datas.value.name,
    businessId: idNew.value,
    businessType: 1, //培训
    content: datas.value.name + '在' + datas.value.trainingAddress + datas.value.trainingTime + '召开'
  }
 
}
const addpaginationParams = ref({})
const dialogFormVisibleFun  = () => {
  if (datas.value.status == 3) {
    dialogFormVisible.value = false
    return
  }
  proxys.$refs.setUserSelect.submitForm().then((val) => {
    addsystemmessage(val).then(() => {
      publish({
        id: idNew.value
      }).then((res) => {
        articleId(idNew.value).then((res) => {
          res.data.status = "" + res.data.status;
          res.data.type = "" + res.data.type;
          idNew.value = res.data.id
          datas.value = res.data;
          disIstrue.value = false
          // proxys.$refs.editors.setdata(datas.value.content)
        });
      })
      proxys.$modal.msgSuccess(`发布成功`);
      dialogFormVisible.value = false
      disIstrue.value = false
    })
  })
}
</script>
<style scoped>
.pad_10 {
  padding: 10px;
}
.pad_10  .el-form--inline .el-form-item {
  margin: 0;
}
.el-divider--horizontal {
  margin: 10px 0;
}
</style>